const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	// 配置入口
	entry: "./src/index.js",
	mode: "production",
	devtool: "source-map",
	// 配置出口
	output: {
		// eslint-disable-next-line no-undef
		path: path.resolve(__dirname, "dist"),
		filename: "main.js",
	},

	// 配置加载器
	module: {
		rules: [
			{
				test: /\.css$/, // 匹配 css 文件
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.js?$/, // 匹配 js 或 jsx 文件
				exclude: /node_modules/, // 排除 node_modules 文件夹
				use: {
					loader: "babel-loader",
					options: {
						// babel 转义的配置选项
						babelrc: true,
						presets: [
							[require.resolve("@babel/preset-env"), { modules: false }],
						],
						cacheDirectory: true,
					},
				},
			},
		],
	},

	// 配置插件
	plugins: [
		new htmlWebpackPlugin({
			template: "src/index.html",
			filename: "index.html",
			inject: true,
		}),
	],

	// 本地开发服务
	devServer: {
		static: {
			// eslint-disable-next-line no-undef
			directory: path.join(__dirname, "dist"),
		},
		host: "localhost",
		port: 8888,
		hot: true,
	},
};
